<template>
  <el-dialog title="修改" append-to-body width="700px" :model-value="modelValue" @close="commEvent.onClose" :z-index="2000">
    <el-form ref="formRef" label-suffix="：">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="厂区"> {{ factorys.find(item => item.value === props.rows?.factoryId)?.label }} </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产线">
            {{ lines.find(item => item.value === props.rows?.lineId)?.label }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产订单"> {{ props.rows?.orderCode }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产量" prop="produceCnt">
            <el-input v-model="formData.produceCnt"> <template #append>t</template></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div style="text-align: center">
        <el-button type="primary" @click="commEvent.onEnter">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from "vue"
import { FormInstance, ElMessage } from "element-plus"
import { EnumProps } from "@/components/ProTable/interface"
import { SystemSpace } from "@/api/interface/order"
import { modify } from "@/api/modules/order"

const props = defineProps({
  modelValue: Boolean,
  rows: { type: Object as PropType<SystemSpace.dailyList>, default: () => {} },
  factorys: { type: Array as PropType<EnumProps[]>, default: () => [] },
  lines: { type: Array as PropType<EnumProps[]>, default: () => [] }
})
const emit = defineEmits(["update:modelValue", "refresh"])

// 参数
const formRef = ref<FormInstance>() // 表单实例
const formData = ref({
  produceCnt: 0
})

// 事件集合
const commEvent = {
  // 关闭弹窗
  onClose: () => {
    emit("update:modelValue", false)
  },
  // 确定
  onEnter: async () => {
    const { code } = await modify({ id: props.rows.id, prodCnt: formData.value.produceCnt })
    if (code !== "200") return
    emit("refresh")
    ElMessage.success("修改成功")
    commEvent.onClose()
  }
}
watch(
  () => props.modelValue,
  async val => {
    console.log("EditDailyDialog modelValue 变化：", val)
    if (val) {
      if (props.rows.id) {
        formData.value.produceCnt = props.rows.produceCnt || 0
        formRef.value?.resetFields()
        formRef.value?.validateField("produceCnt")
      }
    }
  }
)
</script>

<style lang="scss" scoped>
:deep(.el-select-dropdown) {
  z-index: 999999 !important; /* 提升 select 下拉框层级 */
}
.clean-records {
  .table-header {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.el-table) {
    .el-table__cell {
      padding: 8px 0;
    }
  }

  :deep(.el-input-number) {
    .el-input__wrapper {
      padding-left: 8px;
      padding-right: 8px;
    }
  }

  :deep(.el-select) {
    .el-input__wrapper {
      padding-left: 8px;
      padding-right: 8px;
    }
  }
}
</style>
